<template>
    <div class="main">
        <div class="title-box">
            <div class="title">
                {{ queryParam.issusName }}
                <div class="icon-box">
                    <div class="icon">
                        <div>
                            归属项目
                        </div>
                        {{ queryParam.project.projectName }}
                    </div>
                    <div class="icon">
                        <div>触发次数</div>
                        {{ queryParam.issusCount }}
                    </div>
                </div>
            </div>
            <div class="point">
            </div>
            <div class="opration">
                <div class="btn" @click="handleResovle(0)">
                    <i class="el-icon-check"></i>
                    {{ queryParam.issusType === '0' ? '已解决' : '未解决' }}
                </div>
                <div class="btn" @click="handleResovle(1)" v-if="queryParam.issusType !== '2'">
                    <i class="el-icon-cloudy"></i>
                    忽略
                </div>
            </div>
            <div class="desc">
                详细信息
                <div class="line">
                </div>
            </div>

        </div>
        <div class="event">
            事件
            <span>
                {{ issusUuid }} | JSON(17.6kb)
            </span>
            <div class="time">
                <span>触发时间：</span>
                {{ queryParam.issusTime }}
            </div>
        </div>
        <div class="tag-title">
            标签
        </div>
        <div class="tags">
            <div class="tag" v-for="item in queryParam.tags">{{ item.tagName }}</div>
        </div>
        <div class="tag-title">
            消息
        </div>
        <div class="tags">
            {{ queryParam.issusName }}
        </div>
        <div class="tag-title">
            用户
        </div>
        <div class="ip">
            <div class="ip-table">
                IP Address：
            </div>
            <div class="ip-content">
                118.255.44.3
            </div>
        </div>
        <div class="ip">
            <div class="ip-table">
                Opration：
            </div>
            <div class="ip-content">
                IOS
            </div>
        </div>
        <div class="ip">
            <div class="ip-table">
                UserUuid：
            </div>
            <div class="ip-content">
                ade9cdw8gsdaw44dwr
            </div>
        </div>
    </div>
</template>

<script>
import { generateRandomAlphaNumericString, formateDate } from '../untils/setToken'
import { UpdataIssus } from '../api/HomeApi'

export default {
    data() {
        return {
            queryParam: {}, // 路由参数
            issusUuid: ''
        }
    },
    created() {
        this.queryParam = this.$route.query
        this.queryParam.issusTime = formateDate(this.queryParam.issusTime)
        this.issusUuid = this.queryParam.issusId + generateRandomAlphaNumericString(20)
        console.log(this.queryParam, 'this.queryParam');
    },
    methods: {
        handleResovle(type) {
            let updateState;
            if (this.queryParam.issusType == 0) updateState = 1
            if (this.queryParam.issusType == 1) updateState = 0
            if (this.queryParam.issusType == 2) updateState = 0

            // 忽略按钮用
            const data0 = {
                issusId: this.queryParam.issusId,
                updateState: 2
            }
            const data = {
                issusId: this.queryParam.issusId,
                updateState,
            }
            UpdataIssus(type == 1 ? data0 : data).then(res => {
                if (res.data === 'susscced') {
                    this.$message.success('更改成功')
                    this.$router.back()
                } else {
                    this.$message.error('服务错误，请稍后重试')
                }
            })
        }
    }
}

</script>

<style scoped>
.main {
    height: 100%;
    overflow: scroll;
    border: 1px solid #E4E7ED;
    background: #F5F5F5;
    border-radius: 10px;
}

.title-box {
    padding: 15px;
    background: #fff;
}

.title {
    display: flex;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
}

.icon-box {
    font-size: 12px;
    display: flex;
    margin-left: auto;
    margin-right: 30px;
}

.icon {
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: #274785;
}

.icon div {
    margin-bottom: 3px;
}

.opration {
    display: flex;
}

.point {
    height: 15px;
    width: 15px;
    background: #f1bc59;
    border-radius: 50%;
    margin: 10px 0;
}

.btn {
    border: 1px solid #E1E2E6;
    border-radius: 5px;
    font-size: 12px;
    padding: 5px;
    margin: 0px 20px 10px 0;
}

.btn:hover {
    transition: all 0.5s;
    background: #E4E7ED;
    cursor: pointer;
}

.line {
    height: 3px;
    width: 100%;
    background: #6947e4;
    margin-bottom: -15px;
    margin-top: 5px;
}

.desc {
    width: fit-content;
    font-size: 13px;

}

.event {
    padding: 15px;
    font-size: 14px;
    border-bottom: 3px solid rgb(186, 183, 189);

}

.event span {
    color: rgb(88, 141, 240);
}

.time {
    margin-top: 3px;
    font-size: 12px;
    color: #bb9050;
}

.time span {
    font-weight: 500;
    font-size: 10px;
    color: black;
}

.tag-title {
    padding: 15px;
    font-size: 14px;
}

.tags {
    display: flex;
    align-items: center;
    padding: 0px 15px 15px 15px;
    border-bottom: 3px solid rgb(186, 183, 189);
}

.tag {
    border: 1px solid rgb(87, 87, 86);
    margin-right: 10px;
    padding: 3px;
    border-radius: 5px;
    font-size: 11px;
    color: #3864bd;
    font-weight: 520;
}

.ip {
    display: flex;
    align-items: center;
    padding: 0px 15px 15px 15px;
}

.ip-table {
    width: 130px;
    font-size: 10px;
    font-weight: 600;
}

.ip-content {
    background: #fff;
    flex: 1;
    padding: 5px;
    border-radius: 5px;
    font-size: 12px;
}
</style>